<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3"></script>
    <title>第二次作业二</title>
</head>
<body>

<div id="app">
    <h3>haha</h3>
    <h3 v-if="message === 1">haha 这是新增加的行</h3>
    <button v-for="i in message3">这是新增加的按钮</button>
    <hr>
    <button @click="message = 1">点我新增加一行</button>
    <button @click="message3++">点我增加一个按钮</button>
</div>

<script>
    const {createApp} = Vue

    createApp({
        data() {
            return {
                message: 0,
                message3: 0,
                message2: '未输入成绩',
                lists: [{message: 'Foo'}, {message: 'Bar'}]
            }
        },
        watch: {
            message2:{
                handler: function (newValue,oldValue){
                    console.log(this.message);
                    this.$nextTick(function () {
                        this.checkThis();
                    })
                },
                deep:true
            }
        },
        methods: {
            checkThis() {
                if (this.grade >= 95){
                    this.message = "张三的成绩优秀"
                }else if (this.grade >= 75){
                    this.message = "张三的成绩良好"
                }else if (this.grade >= 60){
                    this.message = "张三的成绩及格"
                }else {
                    this.message = "张三的成绩不及格"
                }
            }
        }

    }).mount('#app')
</script>


</body>
</html>